<template>
    <div class="mine">
        <navbar>
            <div class="nav">
                <h3>{{title}}</h3>
            </div>
        </navbar>
        <component :is="mycomponent" @cui='ff'></component>
        <tabbars></tabbars>
    </div>
</template>
<script>
import Tabbars from '../components/Tabbars.vue'
import Myform from '../components/Myform.vue'
import Mymine from '../components/Mymine.vue'
import Navbar from "../components/Navbar.vue"

export default {
    components: { Tabbars,Myform,Mymine,Navbar },
    data(){
        return{
            mycomponent:'Myform',
            arr:['Myform',"Mymine"],
            title:"登录"
        }
    },
    methods:{
       ff(v){
           // 登录成功之后更换页面内容
           this.mycomponent = v
           this.title = "个人中心"
       }
    },
    name:"Mine",
    created(){
        // 检验用户是否登录
       let token = localStorage.getItem('token')
       console.log(token)
       if(token){
           this.mycomponent = 'Mymine'
           this.title = "个人中心"
       }else{
           this.mycomponent = 'Myform'
       } 
    }
}
</script>
<style lang="less" scoped>
.mine .nav{
    background: @primary;
    line-height: 60px;
    text-align: center;
    margin-bottom: 20px;
}
</style>